<template>
  <div>
    <table border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
      <thead>
        <tr class="title">
          <th>科目</th>
          <th>预算金额（万元）</th>
          <th>实际支出金额（万元）</th>
          <th>支出比（%）</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>直接费用</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 研究人员费用</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 设备费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp;&emsp; 购置设备费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp;&emsp; 试制设备费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp;&emsp; 设备改造与租赁费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 材料费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 测试化验加工费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 燃料动力费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 差旅/会议/国际合作与交流费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 出版/文献/信息传播/知识产权事务费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 劳务费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 专家咨询费</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&emsp; 其他支出</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>间接费用</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>合计</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from 'vue'

export default {
  setup() {
    const input = ref()
    const form = reactive({
      
    })
    return {
      input,
      form
    }
  },
}
</script>

<style scoped lang="scss">
table {
  width: 100%;
  line-height: 24px;
}
.title {
  text-align: center;
  line-height: 36px;
  background-color: #f0f2f5;
  th {
    width: 200px;
  }
  th:nth-child(1) {
    width: 250px;
  }
}
.label {
  text-align: center;
  line-height: 28px;
}

input {
  outline: none;
  width: 90%;
  margin: 0 5%;
}
</style>
